<template>
  <el-dialog title="视频教程`" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="940px">
    <div class="viewHelpVideo">

      <div class="videoDiv">
              <video width="100%" height="100%" controls>
                <source :src="$attrs.videoUrl" type="video/mp4">
              </video>
<!--        <iframe src="https://player.bilibili.com/player.html?aid=299859170&bvid=BV1tF411V7cy&cid=739451879&page=1"  style="width: 100%; height: 100%"></iframe>-->
      </div>
      <div class="qrCode"><img src="@/assets/images/gongzonghao.jpg"/>扫一扫手机观看</div>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: "viewMaterial",
    data() {
      return {
      }
    },
    created() {

    },
    methods: {
      handleCloseDialog() {
        this.$emit('update:visableIf', false);
        this.$emit("handleCloseFilter"); //关闭弹窗;
      },
    }
  }
</script>

<style scoped lang="scss">
  .viewHelpVideo {
    height: 400px;
    display: flex;
    align-items: center;
  }
  .videoDiv {
    width: 640px;
    height: 400px;
    max-width: 100%;
    max-height: 100%;
  }
  .qrCode {
    flex: 1 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    margin-left: 10px;
    color: rgba(0, 0, 0, .45);
    img {
      width: 140px;
      height: 140px;
      margin-bottom: 10px;
    }
  }
</style>
